<style scoped lang="scss"></style>
<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";
	import {
		searchDataQbxx
	} from "@/api/search";
	import {
		addOrUpdateQbxx
	} from "@/api/addOrUpdate";

	import {
		postTableData
	} from "@/api/table";


	const city = window.globalObj.name;
	const editorRef = shallowRef();

	const toolbarConfig = {};
	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataQbxx({
			m: "附件"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "附件")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"主要包括指挥专网拓扑图、有线通信组织图、无线通信组织图和IP地址分配表、电话号码分配表、频谱资源分配表、无线电通信联络文件、信（记）号规定表等<br/>1.某某市指挥专网拓扑图<br/>2.某某市无线通信组织图<br/>3.某某市IP地址分配表<br/>4.某某市电话号码分配表<br/>5.某某市频谱资源分配表<br/>6.某某市无线电通信联络文件<br/>7.某某市信（记）号规定表"
	);

	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateQbxx({
					m: "附件",
					data: [{
						k: "附件",
						v: valueHtml.value,
					}],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}


	onBeforeUnmount(() => {
		const editor = editorRef.value;
		if (!editor) return;
		editor.destroy();

	});


	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};
	const tableData1 = ref([])
	const tableData2 = ref([])
	const tableData3 = ref([])
	const tableData4 = ref([])
	const tableData5 = ref([
		{
			'c1':'电动、电声、音响警报器',
			'c2':'响36秒，停24秒，连续3分钟',
			'c3':'响6秒，停6秒，连续3分钟',
			'c4':'一长音3分钟'
		},
		{
			'c1':'通拨电话',
			'c2':'空袭警报',
			'c3':'空袭警报',
			'c4':'解除警报'
		},
		{
			'c1':'手摇警报器',
			'c2':'一长一短',
			'c3':'连续短音',
			'c4':'一长音3分钟'
		},
		{
			'c1':'广播电台',
			'c2':'空袭预报音响，语音同时播出',
			'c3':'空袭警报音响，语音同时播出',
			'c4':'解除警报音响，语音同时播出'
		},
		{
			'c1':'电视台',
			'c2':'空袭预报图像，语音同时播出',
			'c3':'空袭警报图像，语音同时播出',
			'c4':'解除警报图像，语音同时播出'
		},
		{
			'c1':'汽笛',
			'c2':'一长一短',
			'c3':'连续短音',
			'c4':'一长音3分钟'
		},
		{
			'c1':'就便器材',
			'c2':'慢响',
			'c3':'快响',
			'c4':'间断响'
		},
		{
			'c1':'备注',
			'c2':'',
			'c3':'',
			'c4':''
		}
	])
	
	const getList1 = () => {
		return postTableData({
			docType: "intelligence",
			method: "ipfenpei",
		}).then(result => {
			if (result.code === 200) {
				tableData1.value = result.data
			}
		})
	}
	
	const getList2 = () => {
		return postTableData({
			docType: "intelligence",
			method: "dianhuafenpei",
		}).then(result => {
			if (result.code === 200) {
				tableData2.value = result.data
			}
		})
	}
	
	
	const getList3 = () => {
		return postTableData({
			docType: "intelligence",
			method: "pinpuziyuanfenpei",
		}).then(result => {
			if (result.code === 200) {
				tableData3.value = result.data
			}
		})
	}
	
	const getList4 = () => {
		return postTableData({
			docType: "intelligence",
			method: "pinpuziyuanfenpei",
		}).then(result => {
			if (result.code === 200) {
				tableData4.value = result.data
			}
		})
	}


	onMounted(async () => {
		await initHtml();
		await getList1();
		await getList2();
		await getList3();
	});
</script>
<template>
	<div class="">
		<FirstTitle name="附件" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>

		<FirstTitle name="指挥专网拓扑图" class="top-15" />
		<div style="width: 100%;height: auto">
			<img style="width: 100%; height: 100%;" src="../img/tpt.png" alt="" mode="widthFix" />
		</div>


		<FirstTitle name="无线通信组织图" class="top-15" />
		<div style="width: 100%;height: auto">
			<img style="width: 100%; height: 100%;" src="../img/txzz.png" alt="" mode="widthFix" />
		</div>


		<FirstTitle name="IP地址分配表" class="top-15" />
		<div class="text-center top-15">{{city}}IP地址分配表</div>
		<el-table id="table" :data="tableData1" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="unit_name" label="单位名称" align="center" />
			<el-table-column prop="bmmc" label="部门名称" />
			<el-table-column prop="bgw" label="办公网（包含视信）" />
			<el-table-column prop="zhzw" label="指挥网" />
			<el-table-column prop="sphyw" label="视频会议网" />
			<el-table-column prop="jkw" label="监控网" />
			<el-table-column prop="txgzw" label="通信工作网（包含空情、警报、要素监控）" />
			<el-table-column prop="yyw" label="语音网" />
		</el-table>
		
		
		<FirstTitle name="电话号码分配表" class="top-15" />
		<div class="text-center top-15">{{city}}电话号码分配表</div>
		<el-table id="table" :data="tableData2" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="name" label="单位名称" align="center" />
			<el-table-column prop="bmmc" label="部门名称" />
			<el-table-column prop="zhzmc" label="指挥组名称" />
			<el-table-column prop="phone_number" label="电话" />
		</el-table>
		
		
		<FirstTitle name="频谱资源分配表" class="top-15" />
		<div class="text-center top-15">{{city}}频谱资源分配表</div>
		<el-table id="table" :data="tableData3" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" align="center" />
			<el-table-column prop="wlmc" label="网络名称" />
			<el-table-column prop="txxt" label="通信系统" />
			<el-table-column prop="fspl" label="发射频率起(MHz)" />
			<el-table-column prop="jspl" label="接收频率起(MHz)" />
			<el-table-column prop="zydkf" label="占用带宽(发)(MHz)" />
			<el-table-column prop="zydks" label="占用带宽(收)(MHz)" />
		</el-table>
		
		
	<!-- 	<FirstTitle name="无线电通信联络文件" class="top-15" />
		<div class="text-center top-15">{{city}}频谱资源分配表</div>
		<el-table id="table" :data="tableData4" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" align="center" />
			<el-table-column prop="wlmc" label="台号" />
		</el-table> -->
		
		
		
		<FirstTitle name="信（记）号规定表" class="top-15" />
		<div class="text-center top-15">{{city}}信（记）号规定表</div>
		<el-table id="table" :data="tableData5" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="c1" label="手段分类" align="center" />
			<el-table-column prop="c2" label="空袭预报" />
			<el-table-column prop="c3" label="空袭警报" />
			<el-table-column prop="c4" label="解除警报" />
		</el-table>
		
		





		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>